<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.header {
				width: 100%;
				height: 50px;
				/*background-color: rosybrown;*/
				border-top: 2px solid coral;
				border-bottom: 2px solid #F2F2F2;
			}
			
			.header .header_1 {
				width: 960px;
				height: 50px;
				/*background-color: brown;*/
				margin: 0 auto;
			}
			
			.header .header_1 .top {
				width: 80px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				float: left;
				font-size: 16px;
				color: black;
				/*background-color: red;*/
			}
			
			.header .header_1 .logo {
				width: 30PX;
				height: 35PX;
				/*background-color: green;*/
				background: url(img/ff7979635c4daa609900055818cb0bce_eqdFPUJFtAAAAAElFTkSuQmCC.png) no-repeat 0 -300PX;
				float: left;
			}
			
			.header .header_1 .search {
				width: 107px;
				height: 25px;
				border: 1px solid #E5E5E5;
				border-radius: 13px;
				background-image: url(icon-common.png);
				background-repeat: no-repeat;
				background-position-x: -103px;
				background-position-y: -234px;
				/*background-color: red;*/
				float: left;
				margin-top: 15px;
			}
			
			.header .header_1 .login {
				float: right;
				margin-top: 15px;
			}
			
			.box1 {
				width: 960px;
				height: 540px;
				/*background-color: red;*/
				margin: 0 auto;
				margin-top: -15px;
			}
			
			.box2 {
				width: 625px;
				height: 454px;
				/*background-color: gold;*/
				font-size: 13px;
				text-decoration: none;
			}
			
			.box3 {
				width: 315px;
				height: 454px;
				/*background-color: green;*/
				float: right;
				margin-top: -454px;
			}
			
			a {
				/*width: 315px;
				height: 200px;*/
				font-size: 13px;
				text-decoration: none;
				color: black;
				margin-top: 50px;
			}
			
			.box3 .lm1 #zhaopian {
				width: 301px;
				height: 211px;
				margin-left: 14px;
				border-radius: 4px;
			}
			
			.box3 .lm2 #zhaopian {
				width: 301px;
				height: 208px;
				margin-left: 14px;
				margin-top: -18px;
				border-radius: 4px;
			}
			
			.box2 .lm3 #zhaopian {
				border-radius: 5px;
			}
			
			.lm2 {
				width: 300px;
				height: 200px;
				/*background-color: brown;*/
				margin-top: 31px;
				font-size: 13px;
				text-decoration: none;
			}
			
			.shang {
				width: 965px;
				height: 350px;
				/*background-color: red;*/
				margin: auto;
			}
			
			.yuandian ul li {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				list-style: none;
				float: right;
				background-color: g margin-left: 15px;
			}
			
			.yuandian {
				width: 156px;
				height: 15px;
				/*background-color: palevioletred;*/
				margin: auto;
				margin-left: 371px;
				margin-top: 7px;
			}
			
			.top1 {
				width: 960px;
				height: 85px;
				/*background-color: red;*/
				margin: auto;
				/*margin-top: 10px;*/
			}
			
			.yinyue {
				width: 400px;
				height: 25px;
				/*background-color: blue;*/
				margin-left: -111px;
				float: left;
				list-style: none;
				text-align: center;
				font-size: 30px;
				margin-top: 25px;
				font-size: 27px;
				font-weight: bold;
				font-family: "新宋体";
			}
			
			.zhongjian {
				width: 440px;
				height: 87px;
				/*background-color: blue;*/
				float: right;
				list-style: none;
				margin-top: -16px;
			}
			
			.zhongjian ul li {
				width: 45px;
				height: 20px;
				/*background-color:red;*/
				margin-right: -5px;
				float: left;
				list-style: none;
				text-align: center;
				margin-top: 25px;
				font-size: 14px;
				color: gray;
				margin-top: 50px;
			}
			
			.bottom {
				width: 964px;
				height: 816px;
				background-color: red;
				margin: 0 auto;
				margin-top: -15px;
			}
			
			.ychinyinyue {
				width: 964px;
				height: 80px;
				background-color: goldenrod;
				margin: auto;
			}
			/*.zj{width: 960px;
			height: 287px;
			background-color: green;
			margin: auto;
			}*/
			.ychinyinyue .yinyue_left {
				width: 466px;
				height: 286px;
				background-color: pink;
			}
			p{font-size: 25px;
			
		}
			.ychinyinyue .yinyue_left #zhaopian{width: 124px;
				height: 90px;
				margin: auto;}
			.ychinyinyue .yinyue_jian {
				width: 230px;
				height: 286px;
				background-color:chocolate;
				float: right;
				margin-top: -205px;}
			.ychinyinyue .yinyue_right {
				width: 230px;
				height: 286px;
				background-color:black;
				float: right;
				margin-top: -205px;
				
			}
			/*#clear {
				clear: both;
			}*/
		</style>
	</head>

	<body>
		<div class="header">
			<div class="header_1">
				<div class="top logo"></div>
				<div class="top">期刊</div>
				<div class="top">单曲</div>
				<div class="top">专栏</div>
				<div class="top">活动</div>
				<div class="top">APP</div>
				<div class="search">
				</div>
				<div class="login">注册/登录</div>
			</div>
		</div>
		<div class="shang">

			<input type="image" src="img/5a0a64082ea3a.jpg" id="zhaopian" value="" />
			<div class="yuandian">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="top1">
			<div class="yinyue">
				音乐期刊

			</div>
			<div class="zhongjian">
				<ul>
					<li>摇滚</li>
					<li>另类</li>
					<li>民谣</li>
					<li>流行</li>
					<li>电子</li>
					<li>英伦</li>
					<li>古典</li>
					<li>暗潮</li>
					<li>爵士</li>
					<li>金属</li>
					<li>更多

					</li>

				</ul>
			</div>
		</div>
		<div class="box1">
			<div class="box2">
				<div class="lm3">

					<a href="http://www.luoo.net/vol/index/1312" class="title"><input type="image" src="img/640x452.jpg" id="zhaopian" value="" /> vol.960 黄昏时 我们一路狂奔
					</a>
				</div>
			</div>
			<div class="box3">
				<div class="lm1">
					<a href="http://www.luoo.net/vol/index/1302"><input type="image" src="img/640x452 (1).jpg" id="zhaopian" value="" /> vol.959 总是走在寻找意义的路途中
					</a>
				</div>
				<div class="lm2">
					<a href="http://www.luoo.net/vol/index/1296"><input type="image" src="img/640x452 (2).jpg" id="zhaopian" value="" /> vol.958 悲而能壮 哀而不伤
					</a>
				</div>
			</div>
		</div>
		<div id="clear">

		</div>
	</body>
	<div class="bottom">
		<div class="ychinyinyue">
			<!--<div class="zj">-->
				<div class="yinyue_left">
					<p>故城往事</p>
					<input type="image" src="img/b284b44941322fb1a50ac06a38ac686a_350.jpg" id="zhaopian" value="" /></div>
				<div class="yinyue_jian"></div>	
				<div class="yinyue_right"></div>
			<!--</div>
-->
		</div>
	</div>

</html>